import { Square } from "../Square";
import $ from "jquery";
import { IViewer } from "../types";
import PageConfig from "./PageConfig";

/**
 * 显示一个小方块到页面上
 */
export class SquarePageViewer implements IViewer {
  private dom?: JQuery<HTMLElement>;
  private isRemove: boolean = false; // 是否已经被移除

  constructor(private square: Square, private container: JQuery<HTMLElement>) {}

  show(): void {
    if (this.isRemove) return;
    if (!this.dom) {
      // 创建一个元素
      this.dom = $("<div>")
        .css({
          position: "absolute",
          width: PageConfig.squareSize.width,
          height: PageConfig.squareSize.heigth,
          border: "1px solid #ccc",
          boxSizing: "border-box"
        })
        .appendTo(this.container);
    }
    this.dom.css({
      left: this.square.point.x * PageConfig.squareSize.width,
      top: this.square.point.y * PageConfig.squareSize.heigth,
      background: this.square.color
    });
  }

  remove(): void {
    if (this.dom) {
      this.dom.remove();
      this.isRemove = true;
    }
  }

  public getIsRemove () {
    return this.isRemove;
  }
}
